<template>
  <div>
    =={{ id }}
    <el-tree
      ref="tree"
      :data="tableData"
      show-checkbox
      node-key="id"
      default-expand-all
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="defaultKeys"
      :props="defaultProps"
      check-strictly
    />
    <!-- 底部 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="hCancel">取消</el-button>
        <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { transArray } from '@/utils'
import { getPermissionList } from '@/api/permission'
import { getRoleDetail, assignPerm } from '@/api/settings'
export default {
  name: '',
  data() {
    return {
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      id: '',
      defaultKeys: []
    }
  },
  computed: {},
  created() {
    this.loadPer()
  },
  methods: {
    async loadPer() {
      const res = await getPermissionList()
      this.tableData = transArray(res.data)
      console.log(this.tableData, res.data, 99887766)
      // 获取当前角色所拥有的权限
      this.loadRoleDetail()
    },

    async loadRoleDetail() {
      const res = await getRoleDetail(this.id)
      this.defaultKeys = res.data.permIds
    },
    async hSubmit() {
      /*
        步骤分析:
        1-获取所有选中的权限的id集合  perIds:[]
        2-获取角色id
        3-封装api接口函数并调用
        4-关闭对话框,清空数据
        */
      console.log(this.$refs.tree.getCheckedKeys())
      var permIds = this.$refs.tree.getCheckedKeys()
      console.log(this.id, permIds)

      const res = await assignPerm({
        id: this.id,
        permIds
      })
      console.log(res)
      this.$emit('success')
    },
    hCancel() {
      this.$emit('success')
    }
  }
}
</script>
<style lang="less" scoped></style>
